<template>
  <div class="main_box">
      <p class="article">TA的文章</p>
      <div class="articles">
        <div
          class="zhezhao"
          ref="null"
          v-if="userArticle.resultSize === 0"
        >
          什么都没有
        </div>
        <ul v-if="userArticle.resultSize !== 0">
          <li v-for="items of userArticle.result" :key="items.id">
            <div
              class="title"
              title="标题"
              @click="titHandel"
              :id="items.id"
            >
              {{items.title}}
            </div>
            <div class="intro">
              <span class="iconfont" title="浏览次数">&#xe693; {{items.viewSize}}</span>
              <span class="iconfont" title="赞">&#xe605; {{items.zanSize}}</span>
              <span  title="发布时间">{{items.createTime}}</span>
            </div>
            <div class="trag" :title="items.trag">{{items.tags}}</div>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getArticalSmall } from 'com/shuju'
export default {
  name: 'Myarticle',
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      user: 'myHome',
      userArticle: 'myArticle'
    })
  },
  methods: {
    titHandel () {
      getArticalSmall(event.target.getAttribute('id'), this)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .main_box{
    position: absolute
    height: 630px
    width: 900px
    background-color: white
    left: 300px
    top: 115px
    .article{
      width: 95%
      margin: 0 auto
      padding: .2rem
      box-sizing: border-box
      padding-left: .05rem
      font-size: .4rem
    }
    .articles{
      width: 900px
      height: 570px
      box-sizing: border-box
      padding-left: .4rem
      padding-right: .2rem
      .zhezhao{
        position: absolute
        width: 100%
        height: 100%
        left: 0
        font-size: .6rem
        text-align: center
        line-height: 200px
        background-color: white
        z-index: 5
      }
      ul{
        position: relative
        margin: 0
        padding: 0
        width: 100%
        height: 100%
        display: flex
        flex-direction: column
        list-style: none
        li{
          border-top: 1px solid rgb(230,230,230)
          padding-top: .2rem
          padding-bottom: .2rem
          .title{
            width: auto
            height: auto
            float: left
            cursor: pointer
          }
          .title:hover{
            color: rgb(15,153,213)
          }
          .intro{
            position: absolute
            left: 320px
            width: auto
            height: auto
            float: left
            span{
              cursor: default
            }
            span + span{
              margin-left: 1rem
            }
          }
          .trag{
            text-overflow: ellipsis
            overflow: hidden
            white-space: nowrap
            cursor: default
            width: 100px
            height: auto
            float: right
            color: rgb(15,133,213)
          }
        }
        li{
          padding-top: .4rem
          padding-bottom: .4rem
        }
        li:last-child{
          border-bottom: 1px solid rgb(230,230,230)
        }
      }
    }
  }
</style>
